<template>
  <el-dialog
    :close-on-click-modal="false"
    :visible="visible"
    lock-scroll
    title="编辑"
    width="800px"
    @close="visible = false"
  >
    <el-form ref="form" :model="dataForm" :rules="dataFormRules" label-width="120px">

      <section v-for="(ring, index) in dataForm.params" :key="index">
        <el-form-item :label="`第 ${index + 1} 环`"/>

        <el-form-item label="奖励类型" prop="type">
          <el-select v-model="ring.type" :value="ring.type" class="mr-4" clearable placeholder="请选择奖励类型">
            <el-option v-for="item in rewardType" :key="item.value" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>

        <!--   装扮   -->
        <section v-show="ring.type === 0">
          <el-form-item label="细分类型">
            <el-select class="mr-4" clearable placeholder="请选择细分类型" value="">
              <el-option v-for="item in rewardType" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
          </el-form-item>

          <el-form-item label="奖励名称">
            <el-select clearable placeholder="请选择具体奖励" value="">
              <el-option v-for="item in rewardType" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
          </el-form-item>

          <el-form-item label="有效期">
            <section class="flex items-center">
              <el-input-number :max="999" :min="1" class="mr-4"/>
              <p class="mr-8">天</p>
              <el-checkbox>是否永久</el-checkbox>
            </section>
          </el-form-item>

          <el-form-item label="现实价值">
            <section class="flex items-center">
              <el-input-number :max="1e5" :min="0" class="mr-4"/>
              <p>人民币 ￥</p>
            </section>
          </el-form-item>
        </section>

        <!-- 虚拟币 -->
        <section v-show="ring.type === 1">
          <el-form-item label="细分类型">
            <el-select class="mr-4" clearable placeholder="请选择细分类型" value="">
              <el-option v-for="item in rewardType" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
          </el-form-item>

          <el-form-item label="数量">
            <el-input-number :max="1e5" :min="0" class="mr-4"/>
          </el-form-item>

          <el-form-item label="现实价值">
            <section class="flex items-center">
              <el-input-number :max="1e5" :min="0" class="mr-4"/>
              <p>人民币 ￥</p>
            </section>
          </el-form-item>
        </section>

        <!-- 礼物 -->
        <section v-show="ring.type === 2">
          <el-form-item label="细分类型">
            <el-select class="mr-4" clearable placeholder="请选择细分类型" value="">
              <el-option v-for="item in rewardType" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
          </el-form-item>

          <el-form-item label="数量">
            <el-input-number :max="1e5" :min="0" class="mr-4"/>
          </el-form-item>

          <el-form-item label="现实价值">
            <section class="flex items-center">
              <el-input-number :max="1e5" :min="0" class="mr-4"/>
              <p>人民币 ￥</p>
            </section>
          </el-form-item>
        </section>

        <section class="rings rings_del" @click="toDelCurRing(index)">删除当前环</section>
      </section>

      <section class="rings rings_add" @click="addNew">新增一环</section>

    </el-form>

    <section slot="footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="info" @click="form.resetFields()">重置</el-button>
      <el-button type="primary">确定</el-button>
    </section>
  </el-dialog>
</template>

<script>
import { rewardType } from '@/views/anchorReward/config'

// const rules = {
//   type: [
//     { required: true, message: '请输入认证类型', trigger: 'blur' }
//   ],
//   content: [
//     { required: true, message: '请输入认证内容', trigger: 'blur' }
//   ],
//   status: [
//     { required: true, trigger: 'blur' }
//   ]
// }

export default {
  data() {
    return {
      visible: false,
      rewardType,
      dataFormRules: {},
      dataForm: {
        params: [
          {
            type: '',
            status: true
          }
        ]
      }
    }
  },
  computed: {
    form() {
      return this.$refs.form
    }
  },
  methods: {
    show(id) {

      this.visible = true
    },

    // 取消操作
    handleCancel() {
      this.form.resetFields()
      this.visible = false
    },

    addNew() {
      this.dataForm.params.push({
        type: '',
        status: true
      })
    },

    toDelCurRing(index) {
      this.dataForm.params.splice(index, 1)
    }
  }
}
</script>

<style lang="scss" scoped>
.rings {
  height         : 30px;
  line-height    : 30px;
  text-align     : center;
  letter-spacing : 1em;
  width          : 90%;
  margin         : 1em auto;
  cursor         : pointer;
  user-select    : none;
  border         : none;

  &_add {
    border : 1px dashed green;
    color  : green;
  }

  &_del {
    border : 1px dashed #de1717;
    color  : #de1717;
  }
}


</style>
